<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论列表</title>
    <%- include common %>

    <style>
        .thumbnail>img {
            height: 240px;
            width: 200px;
        }

        .thumbnail {
            cursor: pointer;
        }

        td>img {
            width: 120px;
        }
    </style>
</head>

<body>
    <%- include("head",{title:"mlist",username}) %>

    <div class="container-fluid">

        <h2 class="text-primary h2">评论列表</h2>

        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="form-group">
                    <select data-page="<%- page %>" name="" id="pageSizeSelect" class="form-contorl">
                        <option <%- pageSize==10?"selected":'' %> value="10">每页10条</option>
                        <option <%- pageSize==15?"selected":'' %> value="15">每页15条</option>
                        <option <%- pageSize==20?"selected":'' %> value="20">每页20条</option>
                        <option <%- pageSize==30?"selected":'' %> value="30">每页30条</option>
                    </select>
                </div>
            </div>
        </div>


        <table class="table-bordered table-hover table-striped table-condensed">
            <thead>
                <tr class="danger">
                    <td>#</td>
                    <td>评论标题</td>
                    <td>评论内容</td>
                    <td>评论人</td>
                    <td>评论时间</td>
                    <td>评论电影</td>
                    <td>电影缩略图</td>
                    <td>操作1</td>
                    <td>操作2</td>
                </tr>
            </thead>
            <tbody>
                <%  if(result.length>0){    %>
                <%  result.forEach((item,index)=>{    %>
                <tr>
                    <td><%- index+1 %></td>
                    <td><a style="display:block;width:100px;word-break:break-all;"
                            href="/comment/detail?_id=<%- item._id%>"><%- item.title %></a></td>
                    <td>
                        <div style="width: 180px; overflow: hidden;">
                            <%- item.content %>
                        </div>
                    </td>
                    <td><a class="<%- item.author == username ? 'text-danger' : '' %>"
                            href="/comment/plist?author=<%- item.author%>"><%- item.author %></a></td>
                    <td><%- item.time %></td>
                    <td><a href="/comment/mvdetail?mid=<%- item.mid %>"><%- item.movie.title %></a></td>
                    <td>
                        <img src="<%- item.movie.images.large.replace(/img7/,'img3') %>" alt="">
                    </td>
                    <td>
                        <%  if(item.author == username){    %>
                        <button onclick="getDelId('<%- item._id %>')" data-toggle="modal" data-target="#delBox"
                            class="btn btn-danger">删除</button>
                        <%  } %>
                    </td>
                    <td>
                        <%  if(item.author == username){    %>
                        <button data-item='<%- JSON.stringify(item) %>' onclick="getUpdateData(this)"
                            data-toggle="modal" data-target="#updateBox" class="btn btn-warning">修改</button>
                        <%  } %>
                    </td>
                </tr>
                <%  })    %>
                <tr>
                    <td colspan="4">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page-1 %>"
                                        aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a
                                        href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page-2 %>"><%- page-2 %></a>
                                </li>
                                <li><a
                                        href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page-1 %>"><%- page-1 %></a>
                                </li>
                                <li class="active"><a
                                        href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page %>"><%- page %></a>
                                </li>
                                <li><a
                                        href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page+1 %>"><%- page+1 %></a>
                                </li>
                                <li><a
                                        href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page+2 %>"><%- page+2 %></a>
                                </li>
                                <li>
                                    <a href="/comment/mlist?pageSize=<%- pageSize %>&page=<%- page+1 %>"
                                        aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                                <li>
                                    <p>第<%- page %> 页 / 共 <%- totalPage %> 页</p>
                                    <p>每页 <%- pageSize %> 条 / 共 <%- total%> 条</p>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>
                <%  }else{    %>
                <tr>
                    <td colspan="9">暂无数据...</td>
                </tr>
                <%  }    %>
            </tbody>
        </table>

    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="delBox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除提示</h4>
                </div>
                <div class="modal-body">
                    <p>确认删除？&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                    <button onclick="confirmDel()" type="button" class="btn btn-danger">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" tabindex="-1" role="dialog" id="updateBox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改评论 / <span id="uauthor"></span></h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">评论标题</label>
                        <div class="col-sm-10">
                            <input type="text" name="title" class="form-control" id="updateTitle" placeholder="请输入评论标题">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="content" class="col-sm-2 control-label">评论内容</label>
                        <div class="col-sm-10">
                            <textarea rows="10" class="form-control" name="content" id="updateContent"
                                placeholder="请输入评论内容"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">取消</button>
                    <button onclick="confirmUpdate()" type="button" class="btn btn-danger">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <%- include("foot") %>
</body>
<script>
    $("#pageSizeSelect").on("change", function () {
        console.log($(this).val());
        var page = $(this).attr("data-page");
        location.href = "/comment/mlist?page=" + page + "&pageSize=" + $(this).val();
    })

    var delId = null;

    function getDelId(id) {
        delId = id;
    }

    function confirmDel() {
        $.ajax({
            url: "/comment/delOneComment",
            type: "POST",
            data: {
                _id: delId
            },
            success(res) {
                if (res.type) {
                    window.location.reload();
                }
            }
        })
    }
    var updateData = null;

    function getUpdateData(that) {
        var data = JSON.parse(that.getAttribute("data-item"));
        console.log(data);
        updateData = data;
        $("#uauthor").html(data.author);
        $("#updateTitle").val(data.title);
        $("#updateContent").val(data.content);
    }


    function confirmUpdate() {
        $.ajax({
            url: "/comment/updateOneComment",
            type: "POST",
            data: {
                _id: updateData._id,
                title: $("#updateTitle").val(),
                content: $("#updateContent").val()
            },
            success(res) {
                if (res.type) {
                    //修改成功
                    window.location.reload();
                }
            }
        })
    }
</script>

</html>